<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" size="4vw" color="#fff"></u-icon>
			</view>
			<view class="header-title">消息</view>
			<view class="header-right">多选</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input">
				<u-icon name="search" size="4vw" color="#aaa"></u-icon>
				<input class="input-field" type="text" placeholder="搜索帖子" @input="onSearch" />
				<view class="search-button">搜索</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<view class="message-list">
			<view v-for="(message, index) in messages" :key="index" class="message-item" @click="gotoDetail">
				<image class="message-avatar" :src="message.avatar" />
				<view class="message-content">
					<view class="message-title">{{ message.title }}</view>
					<view v-if="message.desc" class="message-desc">{{ message.desc }}</view>
					<view :class="['message-time', message.type === 'system' ? 'system-time' : '']">{{ message.time }}
					</view>
				</view>
				<view v-if="message.badge" class="badge">{{ message.badge }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messages: [
					{
						avatar: '../../static/message/system.png',
						title: '系统通知',
						desc: '',
						time: '2022-12-12 10:12:12',
						badge: null,
						type: 'system'
					},
					{
						avatar: '../../static/message/interaction.png',
						title: '互动消息',
						desc: '张三123 点赞了你的帖子',
						time: '20:42',
						badge: null,
						type: 'interaction'
					},
					{
						avatar: '../../static/message/system.png',
						title: '张三123',
						desc: '这是一段消息这是一段消息这是一段...',
						time: '20:42',
						badge: 1,
						type: 'user'
					},
					{
						avatar: '../../static/message/system.png',
						title: '张三',
						desc: '这是一段消息这是一段消息这是一段...',
						time: '昨日',
						badge: 9,
						type: 'user'
					}
				]
			};
		},
		methods: {
			onSearch(e) {
				const value = e.target.value;
			},
			goBack() {
				uni.navigateBack();
			},
			gotoDetail() {
				uni.navigateTo({
					url: "../../pages/message/messagedetail"
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 2.4vw;
		background: url("@/static/public/background.png") #fff no-repeat 0 -8vw;
		background-size: cover;
	}

	.header {
		height: 10vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 4vw;
		margin-top: 0.5vh;
		background: none;
		color: #000;
		font-weight: bold;
	}

	.header-left {
		cursor: pointer;
		color: #000;
		opacity: 0;
	}

	.header-title {
		font-size: 4.3vw;
	}

	.header-right {
		color: #1C234C;
		font-weight: lighter;
	}

	.search-box {
		margin: 2.4vw 0;
		display: flex;
		justify-content: center;
	}

	.search-input {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 5vw;
		padding: 2.4vw;
		box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.1);
	}

	.input-field {
		flex: 1;
		border: none;
		background: none;
		padding: 0 2.4vw;
		outline: none;
		color: #333;
	}

	.search-button {
		color: #FF5721;
		font-size: 3.6vw;
		padding-left: 2.4vw;
		height: 100%;
		display: flex;
		align-items: center;
		border-left: 0.24vw solid #E4E3E3;
		cursor: pointer;
	}

	.message-list {
		flex: 1;
		background-color: transparent;
	}

	.message-item {
		display: flex;
		padding: 3.6vw;
		border-bottom: 0.24vw solid #f0f0f0;
		position: relative;
	}

	.message-avatar {
		width: 12vw;
		height: 12vw;
		border-radius: 50%;
		margin-right: 2.4vw;
	}

	.message-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.message-title {
		font-size: 3.8vw;
		font-weight: lighter;
	}

	.message-desc {
		color: #888;
		font-size: 3.6vw;
		margin-top: 0.72vw;
	}

	.message-time {
		font-size: 3vw;
		color: #bbb;
		align-self: flex-end;
		position: absolute;
	}

	.system-time {
		left: 19%;
		bottom: 20%;
		font-size: 3.6vw;
	}

	.badge {
		background-color: red;
		color: #fff;
		border-radius: 50%;
		right: 5%;
		bottom: 21%;
		position: absolute;
		width: 4.8vw;
		height: 4.8vw;
		font-size: 3vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
